<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<style>
    .edui-default .edui-editor {
        border-radius: 0;
    }
</style>
<div id="articleForm" class="content" style="min-width:1100px;width:1100px;margin:0 auto;">
    <input class="mini-hidden" name="id"/>
    <table cellpadding="2" cellspacing="1" class="tb">
        <tr>
            <td style="padding:10px 0;"><span class="require-field">*</span> 所属分类：</td>
            <td>
                <input name="catId" class="mini-treeselect w200" emptyText="选择所属栏目" expandOnLoad="0"
                       url="${ctx}/category/list?module=article" textField="catName" valueField="catId"
                       parentField="parentId" onbeforenodeselect="beforeNodeSelect" required="true"/>
                <span class="fr"><a class="mbtn btn-small btn-red" href="javascript:submitArticle();"><i class="fa fa-check"></i>确定</a></span>
            </td>
        </tr>
        <tr>
            <td style="padding:10px 0;"><span class="require-field">*</span> 文章标题：</td>
            <td><input name="title" class="mini mini-textbox w350" required="true"/> 级别：
                <input name="level" class="mini-combobox w100" url="${ctx}/dict/code?id=MXJB&_refresh" valueField="val" value="0" textField="name"/></td>
        </tr>
        <tr>
            <td style="text-align: right;"> 样式：</td>
            <td><input name="style" class="mini mini-textbox w500" /></td>
        </tr>
        <tr>
            <td style="text-align: right;padding:10px 0;"><i class="kg13"></i> 标题图片：</td>
            <td><input id="thumb" name="thumb" class="mini mini-textbox w350" enabled="false"/>
                <a id="article_thumb_upload" class="btn-small btn-red" style="margin-left:10px;padding:4px 8px;border:1px solid #D01405;" href="#"><i class="fa fa-cloud-upload"></i>上传</a>
                <span style="color:blue;margin-left:10px;cursor: pointer;text-decoration:underline;" onclick="viewArticleThumb()">预览</span>
            </td>
        </tr>
        <tr>
            <td class="tl" style="padding:10px 0;"><span class="require-field">*</span> 文章内容：</td>
            <td><script id="editor" type="text/plain" style="width:950px;height:400px;"></script></td>
        </tr>
        <tr>
            <td style="text-align: right;">摘要：</td>
            <td><textarea name="introduce" class="mini-textarea" emptyText="请输入简介信息" style="height:50px;width:952px;font-size: 10px;"></textarea></td>
        </tr>
        <tr>
            <td style="text-align: right;padding:10px 0;"> 标签：</td>
            <td><input name="tags" class="mini mini-textbox w400" emptyText="请输入标签信息以','隔开"/></td>
        </tr>
        <tr>
            <td style="text-align: right; padding:10px 0;">文章作者：</td>
            <td>
                <input name="author" class="mini mini-textbox w80"/>
                <span style="margin-left:20px;">来源：<input name="source" class="mini mini-textbox w100" /></span>
                <span style="margin-left:21px;">链接：<input name="url" class="mini mini-textbox" style="width: 220px;"/></span>
                <span style="margin-left:20px;">浏览次数：<input name="hits" class="mini mini-textbox w80" vtype="int"/></span>
                <span style="margin-left:20px;">创建时间：<input id="createTime" name="createTime" class="mini-datepicker" format="yyyy-MM-dd H:mm" timeFormat="H:mm" showTime="true" showTodayButton="true"/></span>
            </td>
        </tr>
    </table>
</div>
<form id="articleThumbForm" method="post" enctype="multipart/form-data" runat="server">
    <input name="articleThumb" id="article_thumb" type="file" style="visibility:hidden;">
</form>
<script type="text/javascript" src="${UE_PATH}/ueditor.config.js" charset="utf-8"></script>
<script type="text/javascript" src="${UE_PATH}/ueditor.all.min.js" charset="utf-8"></script>
<script type="text/javascript">
    var init = function(){
        mini.parse();
        $("a#article_thumb_upload").click(function () {
            $("input#article_thumb")[0].click();
        });

        $("input#article_thumb").on("change", function () {
            $("#articleThumbForm").ajaxSubmit({
                type: "POST",
                dataType: "json",
                url: "${ctx}/ue/upload?action=uploadimage",
                success: function (res) {
                    if (res.state == "SUCCESS") {
                        tips.success("["+res.title+"] 图片上传上传成功!");
                        mini.get("thumb").setValue(res.url);
                    } else
                        tips.error(res.state);
                },
                async: true
            });
        });
    }

    var ue = UE.getEditor("editor", {
        topOffset:50
    });

    var beforeNodeSelect = function(e) {
        //禁止选中父节点
        if (e.isLeaf == false) e.cancel = true;
    }


    var viewArticleThumb = function(){
        var value = mini.get("thumb").getValue();
        if(value == "")
            alert("没有上传 Thumb 图片!");
        else{
            $("body").css("overflow", "hidden");
            mini.showMessageBox({
                title: "图片预览",
                width: 300,      //宽度
                height: 250,     //高度
                html: `<img src="${ctx}`+value+`" width="100%" height="200"/>`,
                callback: function(action){
                    $("body").css("overflow", "auto");
                }
            });
        }
    }

    var frm = new mini.Form("articleForm");
    var option = 0;
    var submitArticle = function(){
        frm.validate();
        if (frm.isValid() == false) return;
        var data = frm.getData();
        data["content"] = ue.getContent();
        data["createTime"] = mini.get("createTime").getFormValue();
        if (option == "0") {
            $.post("${ctx}/article/save", data, function(res){
                if (res.code == 0) {
                    confirm("添加成功, 是否继续添加?", function(){
                        frm.clear();
                    }, function(){
                        app.loadMain("${ctx}/admin/article/list.jsp", 0, "文章管理 - 文章列表");
                    }, "确定", "取消")
                } else
                    tips.error(res.message);
            });
        } else if (option == "1") {
            $.post("${ctx}/article/update", data, function(res){
                if (res.code == 0) {
                    confirm(`<i class='fa fa-check' style="font-size:1.5em;color:green;"></i>文章修改成功, 返回列表!`, function(){
                        app.loadMain("${ctx}/admin/article/list.jsp", 0, "文章管理 - 文章列表");
                    }, function(){

                    }, "确定", "取消");
                } else
                    tips.error(res.message);
            });
        }

    }

    var setParams = function(params){
        $.get("${ctx}/article/find",{id:params}, function(res){
            if (res.code == 0) {
                frm.setData(res.data);
                option = 1;
                ue.ready(function() {
                    ue.setContent(res.data.content);
                });
            } else
                tips.error(res.message);
        });
    }
</script>
